<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>详聊v-for</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">

      <!-- v-for遍历数组 -->
      <ol>
        <li v-for="(item,index) in arr" :key="item.id">{{item.name}}--{{item.price}}--{{index}}</li>
      </ol>
      <hr>

      <!-- v-for遍历对象 -->
      <ol>
        <li v-for="(value,key,index) in obj" :key="index">{{key}}：{{value}}--{{index}}</li>
      </ol>
      <hr>

      <!-- v-for遍历字符串 -->
      <ol>
        <li v-for="(char,index) in str" :key="index">{{char}}--{{index}}</li>
      </ol>
      <hr>

      <!-- v-for遍历指定次数 -->
      <h3 v-for="(number,index) in n" :key="index">你好--{{number}}--{{index}}</h3>
      <hr>

      <!--  v-for很健壮，以下遍历，均不报错 -->
      <h3 v-for="item in null">测试-{{item}}</h3>
      <h3 v-for="item in undefined">测试-{{item}}</h3>
      <h3 v-for="item in true">测试-{{item}}</h3>
      <h3 v-for="item in ''">测试-{{item}}</h3>
      <h3 v-for="item in []">测试-{{item}}</h3>

    </div>

    <script type="text/javascript">
      new Vue({
        el:'#demo',
        data:{
          arr:[
            {id:'adsaas01',name:'比亚迪·汉',price:'35W'},
            {id:'adsaas02',name:'奔驰·C63',price:'50W'},
            {id:'adsaas03',name:'雅迪',price:'2K'}
          ],
          obj:{
            name:'尚硅谷',
            address:'宏福科技园',
            floor:'三楼'
          },
          str:'hello',
          n:14,
        }
      })
    </script>
  </body>
</html>